import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/'
import { Dialog } from 'vant'

Vue.use(VueRouter)

const routes = [
    {
        path: '/login',
        name: 'login',
        // 路由懒加载
        component: () => import('@/views/login/'),
        meta: { requiresAuth: false }
    },
    // 主页
    {
        path: '/',
        component: () => import('@/views/layout/'),
        children: [
            {
                // 默认子路由
                path: '',
                name: 'home',
                component: () => import('@/views/home/'),
                meta: { requiresAuth: false }
            },
            {
                path: '/qa',
                name: 'qa',
                component: () => import('@/views/qa/'),
                meta: { requiresAuth: false }
            },
            {
                path: '/video',
                name: 'video',
                component: () => import('@/views/video/'),
                meta: { requiresAuth: false }
            },
            {
                path: '/my',
                name: 'my',
                component: () => import('@/views/my/'),
                meta: { requiresAuth: false }
            }
        ]
    },
    // 搜索
    {
        path: '/search',
        name: 'search',
        component: () => import('@/views/search/'),
        meta: { requiresAuth: false }
    },
    // 文章详情
    {
        path: '/article/:articleId',
        name: 'article',
        component: () => import('@/views/article/'),
        // 把动态路由参数映射到组件中
        props: true,
        meta: { requiresAuth: false }
    },
    // 用户个人资料
    {
        path: '/user/profile',
        name: 'user-profile',
        component: () => import('@/views/user-profile'),
        meta: { requiresAuth: false }
    },
    // 小智同学
    {
        path: '/user/chat',
        name: 'user-chat',
        component: () => import('@/views/user-chat'),
        meta: { requiresAuth: true }
    },
    // 收藏、历史
    {
        path: '/my-article/:type?',
        name: 'my-article',
        component: () => import('@/views/my-article/'),
        // 把动态路由参数映射到组件中
        props: true,
        meta: { requiresAuth: true }
    },
    // 关注、粉丝
    {
        path: '/user/:userId/:type?',
        // path: '/user',
        component: () => import('@/views/user-follow/'),
        // 把动态路由参数映射到组件中
        props: true,
        meta: { requiresAuth: true }
    }
]

const router = new VueRouter({
    routes
})

router.beforeEach((to, from, next) => {
    // 判断页面是否需要登录才能访问
    if (to.meta.requiresAuth) {
        // 如果已经登录，就直接通过
        if (store.state.user) {
            return next()
        }

        // 没有登录，提示是否登录
        Dialog.confirm({
            title: '访问提示',
            message: '改功能需要登录才能访问，确认登录嘛'
        })
            .then(() => {
                // on confirm
                router.replace({
                    name: 'login',
                    query: {
                        redirect: router.currentRoute.fullPath
                    }
                })
            })
            .catch(() => {
                // on cancel
                // 取消，中断路由导航
                next(false)
            })
    } else {
        next()
    }
})

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
    if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
    return originalPush.call(this, location).catch(err => err)
}

export default router
